<template>
	<view class="content">
		<moneyBoard></moneyBoard>
		<view class="orderBox">
			<view class="title">
				<span class="title1" @click.prevent="getOrder">我的收益</span>
				<span class="title2" @click.prevent="getCashOrder">提现记录</span>
				<span class="SeleTitle1" v-if="lineIndex==1"></span>
				<span class="SeleTitle2" v-else></span>
				<span class="titleLine"></span>
			</view>
			<view class="line"></view>
			<view class="moneyTip">
				<text class="moneyTip1">{{lineIndex==1?'收益（元）：':'提现中金额（元）'}}</text>
				<text class="moneyTip2" v-show="lineIndex==1">{{(orderTotalMoney/10000).toFixed(2)}}</text>
				<text class="moneyTip2" v-show="lineIndex==2">{{(cashTotalMoney/100).toFixed(2)}}</text>
			</view>
			<view class="orderTitle">
				<text class="order1">金额</text>
				<span class="orderLine1"></span>
				<text class="order2">{{lineIndex==1?'订单类型':'提现状态'}}</text>
				<span class="orderLine2"></span>
				<text class="order3">{{lineIndex==1?'订单时间':'提现时间'}}</text>
			</view>
			<view class="orderInfo" v-show="lineIndex==1">
				<view v-for="(item,index) in orderList" :key="index">
					<text class="order1">{{(item.money/10000).toFixed(2)}}</text>
					<text class="order2">
						{{getTitle(item)}}
					</text>
					<text class="order3">{{lineIndex==1?item.orderTime:item.createTime}}</text>
					<view class="line"></view>
				</view>
			</view>
			<view class="orderInfo" v-show="lineIndex==2">
				<view v-for="(item,index) in cashList" :key="index">
					<text class="order1">{{(item.money/100).toFixed(2)}}</text>
					<text class="order2">
						{{item.status==1?'申请成功': item.status==2?'申请失败':'审核中'}}
					</text>
					<text class="order3">{{item.createTime}}</text>
					<view class="line"></view>
				</view>
			</view>


		</view>
	</view>
</template>

<script>
	import moneyBoard from '/pages/components/moneyBoard.vue'
	import {
		parseUserData
	} from '../../../hook/auth.js'
	import api from '../../../api/api.js'
	export default {
		components: {
			moneyBoard
		},
		data() {
			return {
				orderList: [], //订单列表
				cashList: [], //提现列表
				orderTotalMoney: '', //总金额
				cashTotalMoney: '', //总金额
				lineIndex: 1, //选中标志位
				productList: [], //所有产品
			}
		},
		methods: {
			getTitle(item) {
				if (item.orderType < 3) {
					return this.productList.find(val => val.id == item.orderType).name
				} else {
					return item.title
				}

			},
			//提现按钮
			cashFun() {
				uni.showToast({
					title: '功能正在开发中',
					duration: 2000
				})
			},
			//查询提现记录
			getCashOrder() {
				const self = this
				self.lineIndex = 2
				if (!parseUserData().openid) {
					uni.showToast({
						title: '请重新登录',
						duration: 2000
					})
				}
				self.cashList = []
				self.cashTotalMoney = 0
				api.getCashOrder({
					wechat_id: parseUserData().openid
				}).then(res => {
					console.log(res)
					if (res.code == 200 && res.data.length > 0) {
						res.data.forEach(val => {
							if (val.status == 3) {
								self.cashTotalMoney += val.money
							}
							self.cashList.push(val)
						})
					}
				})
			},
			//查询订单
			getOrder() {
				const self = this
				self.lineIndex = 1
				let req = {
					weChatId: parseUserData().openid,
					createTime: null
				}
				console.log(parseUserData(), req)
				try {
					api.searchOrder(req).then(res => {
						console.log("订单结果",res)
						self.orderList = []
						self.orderTotalMoney = 0
						res.data.forEach(val => {
							if (val.ratioInfo != null) {
								const ratioData = JSON.parse(val.ratioInfo)
								ratioData.forEach(ratioVal => {
									if (ratioVal.user_id == parseUserData()
										.saleUserId) {
										self.orderTotalMoney += val.money * ratioVal.ratio
										val.money = val.money * ratioVal.ratio
										self.orderList.push(val)
									}
								})
							} else {
								val.money = "数据丢失"
							}


						})
					})
				} catch (e) {
					console("e", e)
					//TODO handle the exception
				}
			},
			//获取所有产品
			getProduct() {
				const self = this
				api.getProduct({
					online: false
				}).then(res => {
					if (res.code == 200 && res.data.length > 0) {
						self.productList = res.data
					} else {
						uni.showToast({
							title: "初始化错误，请重进或联系客服",
							icon: "none"
						})
					}
				})
			},
		},
		mounted() {
			this.getOrder()
			this.getProduct()
		}
	}
</script>

<style>
	.orderInfo {
		width: 100%;
		height: calc(100% - 150px);
		overflow-y: auto;
	}

	.orderInfo .order1,
	.orderInfo .order2,
	.orderInfo .order3 {
		font-size: 10px;
		color: rgba(229, 229, 229, 1);
	}

	.orderTitle .orderLine2 {
		left: 58%;
	}

	.orderLine1,
	.orderLine2 {
		position: absolute;
		left: 25%;
		width: 0;
		height: 18px;
		border-right: 1px solid rgba(56, 56, 56, 1);
		top: 50%;
		transform: translateY(-50%);
	}

	.order1 {
		width: 25%;
	}

	.order2 {
		width: 32%;
		line-height: 12px;
	}

	.order3 {
		width: calc(100% - 25% - 32%);
	}

	.order1,
	.order2,
	.order3 {
		display: inline-block;
		text-align: center;
	}

	.orderTitle {
		margin-top: 10px;
		position: relative;
		width: 100%;
		height: 32px;
		line-height: 32px;
		border-radius: 5px;
		background: rgba(82, 82, 82, 1);
		border: 0.5px solid rgba(128, 128, 128, 1);
		font-size: 12px;
		font-weight: 400;
		color: rgba(229, 229, 229, 1);
	}

	.moneyTip2 {
		font-size: 20px;
		font-weight: 500;
		color: rgba(255, 255, 255, 1);
	}

	.moneyTip1 {
		display: block;
		margin: 10px 0 6px 0;
		font-size: 12px;
		color: rgba(229, 229, 229, 1);
	}

	.title .SeleTitle2 {
		left: unset;
		right: 25%;
		transform: translate(50%, 10px);
	}

	.SeleTitle1,
	.SeleTitle2 {
		position: absolute;
		left: 25%;
		top: 50%;
		width: 26px;
		height: 3px;
		border-radius: 30px;
		background: rgba(59, 223, 235, 1);
		transform: translate(-50%, 10px);
	}

	.orderBox .line {
		position: relative;
		width: 100%;
		height: 0px;
		border-bottom: 1px solid rgba(128, 128, 128, 1);
		margin: 0 auto;
	}

	.titleLine {
		height: 24px;
		width: 0px;
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		border-right: 1px solid rgba(128, 128, 128, 1);
	}

	.title1,
	.title2 {
		display: inline-block;
		width: 50%;
		height: 50px;
		font-size: 14px;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		line-height: 50px;
	}

	.title {
		position: relative;
	}

	.orderBox {
		width: 100%;
		padding: 8px 10px;
		box-sizing: border-box;
		height: calc(100% - 210px);
		border-radius: 10px;
		margin-top: 10px;
		background: rgba(56, 56, 56, 1);
	}

	.money2 {
		margin-top: 12px;
		display: block;
		font-size: 18px;
		color: rgba(255, 255, 255, 1);
	}

	.leftBox,
	.rightBox {
		padding-top: 10px;
		box-sizing: border-box;
		width: 50%;
		display: inline-block;
	}

	.line {
		position: relative;
		width: 95%;
		height: 0px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.46);
		margin: 0 auto;
	}


	.content {
		width: 100%;
		height: 100vh;
		box-sizing: border-box;
		padding: 20px;
		background: rgba(34, 34, 34, 1);
		overflow-x: hidden;
	}
</style>